<template>
  <div class="interview-arrangement">
    <div class="header">
      <router-link to="/main/renshi/zhaoping/process" class="back-btn">
        <i class="el-icon-arrow-left"></i>
        <span>返回</span>
      </router-link>
      <h2>面试安排</h2>
    </div>

    <div class="content">
      <!-- 面试日程表 -->
      <el-calendar v-model="currentDate">
        <template slot="dateCell" slot-scope="{date, data}">
          <div class="calendar-cell">
            <p :class="data.isSelected ? 'is-selected' : ''">
              {{ data.day.split('-').slice(2).join('') }}
            </p>
            <div class="interview-count" v-if="getInterviewCount(date)">
              {{ getInterviewCount(date) }}场面试
            </div>
          </div>
        </template>
      </el-calendar>

      <!-- 面试列表 -->
      <div class="interview-list">
        <div class="list-header">
          <h3>面试安排列表</h3>
          <el-button type="primary" size="small" @click="showAddDialog">新增面试</el-button>
        </div>
        <el-table :data="interviewList" style="width: 100%">
          <el-table-column prop="candidateName" label="候选人" width="120"></el-table-column>
          <el-table-column prop="position" label="应聘职位" width="150"></el-table-column>
          <el-table-column prop="interviewTime" label="面试时间" width="180"></el-table-column>
          <el-table-column prop="interviewer" label="面试官" width="120"></el-table-column>
          <el-table-column prop="location" label="面试地点" width="150"></el-table-column>
          <el-table-column prop="status" label="状态" width="100">
            <template slot-scope="scope">
              <el-tag :type="getStatusType(scope.row.status)">{{ scope.row.status }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <el-button size="mini" @click="editInterview(scope.row)">编辑</el-button>
              <el-button size="mini" type="danger" @click="cancelInterview(scope.row)">取消</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <!-- 新增/编辑面试对话框 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="50%">
      <el-form :model="interviewForm" label-width="100px">
        <el-form-item label="候选人">
          <el-select v-model="interviewForm.candidateId" placeholder="请选择候选人">
            <el-option
              v-for="item in candidates"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="面试时间">
          <el-date-picker
            v-model="interviewForm.interviewTime"
            type="datetime"
            placeholder="选择面试时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="面试官">
          <el-select v-model="interviewForm.interviewerId" placeholder="请选择面试官">
            <el-option
              v-for="item in interviewers"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="面试地点">
          <el-input v-model="interviewForm.location"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" v-model="interviewForm.remarks"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveInterview">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentDate: new Date(),
      interviewList: [
        {
          id: 1,
          candidateName: '张三',
          position: '前端开发工程师',
          interviewTime: '2024-03-12 14:00:00',
          interviewer: '李经理',
          location: '会议室A',
          status: '待面试'
        }
      ],
      dialogVisible: false,
      dialogTitle: '新增面试',
      interviewForm: {
        candidateId: '',
        interviewTime: '',
        interviewerId: '',
        location: '',
        remarks: ''
      },
      candidates: [
        { id: 1, name: '张三' },
        { id: 2, name: '李四' }
      ],
      interviewers: [
        { id: 1, name: '李经理' },
        { id: 2, name: '王总监' }
      ]
    }
  },
  methods: {
    getInterviewCount(date) {
      // 获取指定日期的面试数量
      const dateStr = this.formatDate(date)
      return this.interviewList.filter(item => 
        item.interviewTime.startsWith(dateStr)
      ).length
    },
    formatDate(date) {
      const d = new Date(date)
      return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
    },
    getStatusType(status) {
      const map = {
        '待面试': 'info',
        '已完成': 'success',
        '已取消': 'danger'
      }
      return map[status] || 'info'
    },
    showAddDialog() {
      this.dialogTitle = '新增面试'
      this.interviewForm = {
        candidateId: '',
        interviewTime: '',
        interviewerId: '',
        location: '',
        remarks: ''
      }
      this.dialogVisible = true
    },
    editInterview(row) {
      this.dialogTitle = '编辑面试'
      this.interviewForm = { ...row }
      this.dialogVisible = true
    },
    saveInterview() {
      // TODO: 保存面试信息
      this.$message.success('保存成功')
      this.dialogVisible = false
    },
    cancelInterview(row) {
      this.$confirm('确认取消该面试吗？')
        .then(() => {
          row.status = '已取消'
          this.$message.success('操作成功')
        })
        .catch(() => {})
    }
  }
}
</script>

<style lang="scss" scoped>
.interview-arrangement {
  padding: 20px;

  .header {
    margin-bottom: 30px;
    position: relative;
    text-align: center;

    .back-btn {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      text-decoration: none;
      color: #606266;
      display: flex;
      align-items: center;
    }

    h2 {
      margin: 0;
      font-size: 24px;
      color: #303133;
    }
  }

  .content {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  }

  .calendar-cell {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    
    .interview-count {
      font-size: 12px;
      color: #409EFF;
      margin-top: 4px;
    }
  }

  .interview-list {
    margin-top: 20px;

    .list-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;

      h3 {
        margin: 0;
      }
    }
  }
}
</style> 